<!DOCTYPE html>
<html>
<head>
{include file="common/head"}

<style type="text/css">
.news-hero{position:relative;background:url('{$Info.category.image}') center/cover no-repeat;min-height:300px;display:flex;align-items:flex-start;}
</style>
</head>
<body>
<div class="body-inner">
    {include file="common/menu"}

    <main>
        <section class="section page-hero news-hero">
            <div class="container">
                <h1 class="sec-title">{$Info.category.name}</h1>
                <p class="page-sub">{$Info.category.title}</p>
            </div>
        </section>

        <section class="crumbs">
            <div class="container">
                {hkcms:breadcrumb symbol="<span class='sep'>/</span>" /}                
            </div>
        </section>

        <section class="detail-page">
            <div class="container">
                <a href="{$Info.category.url}" class="back-link">← 返回</a>
                <div class="detail-card">
                    <h1 id="news-title" class="detail-title">{$Info.title}</h1>
                    <div id="news-date" class="detail-date">{hkcms:date name="$Info.publish_time" format="Y-m-d H:i"}</div>
                    {if $Info['thumb']}
                    <div id="news-cover" class="detail-cover">
                        <img src="{$Info.thumb}" alt="{$Info.title}" style="max-width: 100;"/>
                    </div>
                    {/if}
                    <article id="news-content" class="detail-content">
                        {$Info.content}
                    </article>
                </div>
                <div class="bc-related-post">
                    {// type="pre"上一篇，len 表示标题长度，dot表示超过标题长度使用...拼接，另外还有pre标签可以自动生成html，根据你的需要使用合适的标签}
                    {hkcms:prenext type="pre" len="10" dot="..."}
                    <a href="{$item.url}" class="previous-post"><i class="fa fa-angle-left"></i> {:__('Pre posts')}:{$item.title}</a>
                    {else /}
                    <a href="#!" class="previous-post"><i class="fa fa-angle-left"></i> {:__('No more')}</a>
                    {/hkcms:prenext}
                    {hkcms:prenext type="next" len="10" dot="..."}
                    <a href="{$item.url}" class="next-post">{:__('Next posts')}:{$item.title} <i class="fa fa-angle-right"></i></a>
                    {else /}
                    <a href="#!" class="next-post">{:__('No more')} <i class="fa fa-angle-right"></i></a>
                    {/hkcms:prenext}
                </div>
            </div>
        </section>
    </main>

    {include file="common/footer"}
</div>
</body>
</html>
